<template>
  <div class="topic-selection-item">
    <div @click="showDialog">
      <div class="title">{{data.name}}</div>
      <div class="go-btn">
        我想参与
        <div class="right2-icon"></div>
      </div>
    </div>
    <!-- 联系我们弹窗 -->
    <ContactUs :data="dialogData" />
  </div>
</template>

<script>
import ContactUs from '@/components/ContactUs';

export default {
  components: {
    ContactUs
  },
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      dialogData: {
        bSwitch: false
      }
    }
  },
  methods: {
    showDialog() {
      this.dialogData.bSwitch = true;
    }
  }
}
</script>

<style lang="scss" scoped>
.topic-selection-item {
  padding: 16px 0;
  border-bottom: 1px solid #F1F1F1;
  cursor: pointer;
  .title2 {
    height: 48px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #272727;
    line-height: 24px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    word-break: break-all;
  }
  .go-btn {
    font-size: 14px;
    font-weight: 400;
    color: #D42A31;
    line-height: 20px;
    .right2-icon {
      width: 14px;
      height: 14px;
      background: url('../../../assets/right2.png') no-repeat;
      background-size: cover;
      display: inline-block;
      vertical-align: middle;
    }
  }
}
</style>